<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书爆款检索神器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FE2C55', // 小红书风格红色
                        secondary: '#f5f5f7',
                        dark: '#1d1d1f',
                        'gray-light': '#fbfbfd',
                        'gray-medium': '#6e6e73',
                        'gray-dark': '#86868b',
                    },
                    fontFamily: {
                        sans: ['SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .backdrop-blur-sm {
                backdrop-filter: blur(10px);
            }
            .apple-shadow {
                box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-200;
            }
            .button-hover {
                @apply hover:bg-primary/90 active:bg-primary/80 transition duration-200;
            }
            .note-card-hover {
                @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-gray-light min-h-screen font-sans text-dark">
<!-- 顶部导航栏 -->
<header class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-sm border-b border-gray-200 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa fa-search text-gray-medium text-xl"></i>
            <h1 class="text-xl font-semibold">小红书爆款检索神器</h1>
        </div>
        <div class="flex items-center space-x-4">
            <button class="text-gray-medium hover:text-primary transition-colors">
                <i class="fa fa-question-circle"></i>
            </button>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto px-4 pt-24 pb-16 max-w-4xl">
    <!-- 搜索框 -->
    <div class="mb-10 mt-6">
        <div class="bg-white rounded-xl p-6 apple-shadow">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-center">输入关键词搜索</h2>
            <div class="flex flex-col sm:flex-row gap-3">
                <input
                        type="text"
                        id="search-input"
                        placeholder="请输入搜索关键词..."
                        class="flex-1 px-4 py-3 rounded-lg border border-gray-300 input-focus text-lg outline-none"
                >
                <button
                        id="search-button"
                        class="bg-primary text-white px-6 py-3 rounded-lg button-hover font-medium text-lg flex items-center justify-center"
                >
                    <i class="fa fa-search mr-2"></i> 搜索
                </button>
            </div>
            <p class="text-gray-medium text-sm mt-2 text-center">例如：基金、股票、投资等</p>
        </div>
    </div>

    <!-- 搜索结果 -->
    <div id="result-container" class="space-y-6">
        <!-- 初始状态提示 -->
        <div class="bg-white rounded-xl p-6 text-center apple-shadow">
            <div class="text-gray-medium mb-4">
                <i class="fa fa-search text-4xl opacity-30"></i>
            </div>
            <h3 class="text-xl font-medium text-gray-dark">请输入关键词并点击搜索</h3>
            <p class="text-gray-medium mt-2">搜索结果将显示在这里</p>
        </div>

        <!-- 加载状态（默认隐藏） -->
        <div id="loading-indicator" class="hidden bg-white rounded-xl p-6 text-center apple-shadow">
            <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary mb-4"></div>
            <h3 class="text-xl font-medium">正在搜索...</h3>
            <p class="text-gray-medium mt-2">请稍候，我们正在获取数据</p>
        </div>

        <!-- 结果内容（默认隐藏） -->
        <div id="search-results" class="hidden">
            <div class="bg-white rounded-xl p-6 apple-shadow mb-6">
                <h3 class="text-xl font-semibold" id="result-title">搜索结果</h3>
                <p class="text-gray-medium mt-1" id="result-summary"></p>
            </div>

            <div id="results-content" class="grid grid-cols-1 gap-6">
                <!-- 结果将通过JavaScript动态填充 -->
            </div>
        </div>

        <!-- 错误状态（默认隐藏） -->
        <div id="error-message" class="hidden bg-white rounded-xl p-6 text-center apple-shadow">
            <div class="text-red-500 mb-4">
                <i class="fa fa-exclamation-triangle text-4xl"></i>
            </div>
            <h3 class="text-xl font-medium text-red-600">搜索失败</h3>
            <p id="error-text" class="text-gray-medium mt-2">请检查网络连接或稍后重试</p>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6">
    <div class="container mx-auto px-4 text-center text-gray-medium text-sm">
        <p>© 2023 小红书搜索助手 - 苹果风格设计</p>
        <p class="mt-2">本页面仅用于演示，数据仅供参考</p>
    </div>
</footer>

<script>
    // 获取DOM元素
    const searchInput = document.getElementById('search-input');
    const searchButton = document.getElementById('search-button');
    const loadingIndicator = document.getElementById('loading-indicator');
    const searchResults = document.getElementById('search-results');
    const resultsContent = document.getElementById('results-content');
    const errorMessage = document.getElementById('error-message');
    const errorText = document.getElementById('error-text');
    const resultTitle = document.getElementById('result-title');
    const resultSummary = document.getElementById('result-summary');

    // 搜索按钮点击事件
    searchButton.addEventListener('click', () => {
        performSearch();
    });

    // 输入框回车事件
    searchInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            performSearch();
        }
    });

    // 执行搜索
    function performSearch() {
        const keyword = searchInput.value.trim();

        if (!keyword) {
            showError('请输入搜索关键词');
            return;
        }

        // 显示加载状态
        showLoading();

        // 调用API
        fetchResults(keyword);
    }

    // 获取搜索结果
    function fetchResults(keyword) {
        const apiUrl = `http://127.0.0.1:8080/xhs/node/search?keyword=${encodeURIComponent(keyword)}`;

        fetch(apiUrl)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP错误，状态码: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                // 处理搜索结果
                displayResults(data);
            })
            .catch(error => {
                // 显示错误信息
                console.error('搜索出错:', error);
                showError(`搜索失败: ${error.message}`);
            });
    }

    // 显示搜索结果
    function displayResults(data) {
        // 隐藏加载状态
        loadingIndicator.classList.add('hidden');

        try {
            // 更新标题和摘要
            resultTitle.textContent = data.title || '搜索结果';
            resultSummary.textContent = `根据关键字【${searchInput.value}】找到 ${data.reqData?.length || 0} 条笔记`;

            // 清空结果容器
            resultsContent.innerHTML = '';

            // 检查是否有结果
            if (!data.reqData || data.reqData.length === 0) {
                resultsContent.innerHTML = `
                        <div class="bg-gray-50 rounded-xl p-8 text-center">
                            <i class="fa fa-search text-gray-medium text-4xl mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-dark">没有找到相关笔记</h3>
                            <p class="text-gray-medium mt-2">请尝试使用其他关键词</p>
                        </div>
                    `;
            } else {
                // 渲染笔记卡片
                data.reqData.forEach((note, index) => {
                    const card = createNoteCard(note, index);
                    resultsContent.appendChild(card);
                });
            }

            // 显示结果
            searchResults.classList.remove('hidden');

            // 平滑滚动到结果区域
            searchResults.scrollIntoView({ behavior: 'smooth', block: 'start' });
        } catch (error) {
            showError('结果解析失败');
            console.error('解析结果出错:', error);
        }
    }

    // 创建笔记卡片
    function createNoteCard(note, index) {
        const card = document.createElement('div');
        card.className = 'bg-white rounded-xl overflow-hidden apple-shadow note-card-hover';

        // 设置卡片内容
        card.innerHTML = `
                <div class="p-5">
                    <div class="flex items-center mb-3">
                        <span class="inline-block bg-primary/10 text-primary text-xs font-medium px-2.5 py-0.5 rounded-full">
                            爆款笔记
                        </span>
                        <span class="ml-2 text-xs text-gray-medium">No.${index + 1}</span>
                    </div>

                    <h3 class="text-lg font-semibold mb-3 line-clamp-2">
                        <a href="${note.nodeUrl.url}" target="_blank" class="hover:text-primary transition-colors">
                            ${note.nodeTitle}
                        </a>
                    </h3>

                    <p class="text-gray-dark mb-4 line-clamp-3">
                        AI评论：${note.aiComment}
                    </p>

                    <div class="flex justify-between items-center">
                        <a href="${note.nodeUrl.url}" target="_blank" class="text-primary text-sm font-medium hover:underline">
                            查看详情 <i class="fa fa-angle-right ml-1"></i>
                        </a>

                        <div class="flex items-center space-x-4">
                            <button class="text-gray-medium hover:text-primary transition-colors">
                                <i class="fa fa-heart-o"></i>
                            </button>
                            <button class="text-gray-medium hover:text-primary transition-colors">
                                <i class="fa fa-comment-o"></i>
                            </button>
                            <button class="text-gray-medium hover:text-primary transition-colors">
                                <i class="fa fa-share-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;

        return card;
    }

    // 显示加载状态
    function showLoading() {
        loadingIndicator.classList.remove('hidden');
        searchResults.classList.add('hidden');
        errorMessage.classList.add('hidden');
    }

    // 显示错误信息
    function showError(message) {
        errorText.textContent = message;
        errorMessage.classList.remove('hidden');
        loadingIndicator.classList.add('hidden');
        searchResults.classList.add('hidden');

        // 平滑滚动到错误区域
        errorMessage.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    // 页面滚动效果
    window.addEventListener('scroll', () => {
        const header = document.querySelector('header');
        if (window.scrollY > 10) {
            header.classList.add('py-2', 'shadow-md');
            header.classList.remove('py-3');
        } else {
            header.classList.add('py-3');
            header.classList.remove('py-2', 'shadow-md');
        }
    });
</script>
</body>
</html>
